<template>
  <div class="app-container customer-div">
    <div>
      <!--搜索-->
      <el-form :inline="true" :model="listQuery" size="mini" label-width="80px">
        <el-form-item label="月份：">
          <el-date-picker
            v-model="listQuery.targetMonth"
            type="monthrange"
            format="yyyy 年 MM 月"
            value-format="yyyy-MM"
            start-placeholder="开始月份"
            end-placeholder="结束月份">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="产品线：">
          <el-input v-model="listQuery.goodsLineName" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleSearchList()" type="primary">
            查询
          </el-button>
          <el-button :loading="btnLoading2" @click="downloadExcel()" type="primary">
            导出
          </el-button>
          <el-button @click="updateActualTargetNum()" type="primary">
            更新
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--数据列表-->
    <div class="table-container">
      <div style="font-size:14px;line-height: 30px;padding:10px 0">
        销售目标合计：<span style="font-weight: bold">{{ allTargetSaleNum }}</span>
        <span style="padding-left:20px;">销售实际销量：</span><span style="font-weight: bold">{{ allActualSaleNum }}</span>
        <span style="padding-left:20px;">发货数量：</span><span style="font-weight: bold">{{ allActualSendNum }}</span>
        <span style="padding-left:20px;">采购现金价毛利：</span><span style="font-weight: bold">{{ allActualSendProfit }}</span>
        <span style="padding-left:20px;">采购吨毛利：</span><span style="font-weight: bold">{{ allActualSendPerProfit }}</span>
        <span style="padding-left:20px;">完成率：</span><span style="font-weight: bold">{{ allPerSendProfit }}</span>
      </div>
      <el-table
        ref="multipleTable"
        v-loading="listLoading"
        :data="tableData"
        border
        style="width:100%;margin-top:20px;">
        <el-table-column label="牌号" align="center" min-width="100" prop="goodsLineName">
        </el-table-column>
        <el-table-column align="center" label="当月目标" min-width="100" prop="targetSaleNum">
        </el-table-column>
        <el-table-column align="center" label="已完成销量" min-width="100" prop="actualSaleNum">
        </el-table-column>
        <el-table-column label="完成率" align="center" min-width="100" prop="actualSaleRate">
        </el-table-column>
        <el-table-column min-width="100" label="发货数量" align="center" prop="actualSendNum">
        </el-table-column>
        <el-table-column min-width="100" label="采购现金价毛利" align="center" prop="actualSendProfit">
        </el-table-column>
        <el-table-column min-width="100" label="吨毛利" align="center" prop="perSendProfit">
        </el-table-column>
        <el-table-column min-width="100" label="备注" align="center" prop="targetRemark">
        </el-table-column>
        <el-table-column min-width="100" label="操作" align="center">
          <template  slot-scope="{row}">
            <el-button type="text" @click="showPop('edit',row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          layout="total, sizes,prev, pager, next,jumper" :current-page.sync="listQuery.pageNum"
          :page-size="listQuery.pageSize" :page-sizes="[10, 15, 20, 50, 100]" :total="count">
        </el-pagination>
      </div>
    </div>

    <!-- 编辑弹框 -->
    <el-dialog
      :close-on-click-modal="false"
      title="编辑月目标"
      :visible.sync="dialogVisible"
      width="400px">
        <el-form :model="form" size="mini" label-width="100px" :rules="rules" ref="form">
          <el-form-item label="销量目标：" prop="targetSaleNum">
            <el-input v-model="form.targetSaleNum" style="width:150px;" clearable></el-input>
          </el-form-item>
          <el-form-item label="备注：" prop="targetRemark">
            <el-input v-model="form.targetRemark" style="width:150px;" clearable></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleConfirm" :loading="btnLoading">确 定</el-button>
        </span>
      </el-dialog>
  </div>
</template>
<script>

import { getPurchaseTargetListAPI,getEditTargetInfotAPI, updateActualTargetNumAPI } from '@/api/purchase.js'
import store from '@/store'
const defaultListQuery = {
  targetMonth: [], //月份
  goodsLineName: '',//产品线
  isExport: 0,//是否导出(1是，0否)
  pageNum: 1,
  pageSize: 10
};
const defaultForm = {
  targetId: 0,
  targetSaleNum: '',//销售目标
  targetRemark: '',//备注
};
export default {
  name: "purchaseTargetFinished",
  data() {
    return {
      listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
      tableData: [],
      count: 0,
      listLoading: false,
      btnLoading2:false,
      allTargetSaleNum: '',//销售目标合计
      allActualSaleNum: '',//销售实际销量
      allActualSendNum: '',//发货数量
      allActualSendProfit: '',//采购现金价毛利
      allActualSendPerProfit: '',//采购吨毛利
      allPerSendProfit: '',//完成率
      dialogVisible: false,
      form: JSON.parse(JSON.stringify(defaultForm)),
      btnLoading: false,
      rules: {
        targetSaleNum: [{ required: true, trigger: 'blur', message: '请输入销售目标'}],
      },
    }
  },

  computed: {

  },
  created() {
    const timestamp = new Date();
    let year = timestamp.getFullYear()
    let month = timestamp.getMonth() + 1
    month = month < 10 ? '0' + month : month
    let time= year+'-'+ month
    this.listQuery.targetMonth=[time,time]
    this.getList();
  },
  methods: {
    // 更新当月采购实际销量
    updateActualTargetNum() {
      updateActualTargetNumAPI().then((response) => {
        this.getList()
      }).catch((error) => {
        this.listLoading = false;
      })
    },
    // 导出
    downloadExcel() {
      this.btnLoading2 = true;
      this.listQuery.isExport=1
      getPurchaseTargetListAPI(this.listQuery).then((res) => {
        this.btnLoading2 = false;
        require.ensure([], () => {
        const { export_json_to_excel } = require('sheet/Export2Excel');
        const tHeader = res.title;
        const filterVal = res.columns;
        const list = res.list;
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, res.fileName);
        })
      }).catch(() => {
        this.btnLoading2 = false;
      })
    },
    //下载表格数据格式化
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    // 提交表单
    handleConfirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.btnLoading = true
          getEditTargetInfotAPI(this.form).then(() => {
            this.btnLoading = false;
            this.dialogVisible = false;
            this.getList()
          }).catch(() => {
            this.btnLoading = false;
          })
        }
      })
    },
    // 关闭弹框
    handleClose() {
      this.dialogVisible = false;
      this.$refs.form.resetFields();
    },
    showPop(type, item) {
      this.dialogVisible = true;
      this.form = JSON.parse(JSON.stringify(item))
    },
    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
    handleSearchList() {
      this.listQuery.pageNum = 1;
      this.getList();
    },
    //获取列表
    getList() {
      this.listLoading = true;
      getPurchaseTargetListAPI(this.listQuery).then(response => {
        this.tableData = response.list;
        this.allTargetSaleNum = response.allTargetSaleNum
        this.allActualSaleNum = response.allActualSaleNum
        this.allActualSendNum = response.allActualSendNum
        this.allActualSendProfit = response.allActualSendProfit
        this.allActualSendPerProfit = response.allActualSendPerProfit
        this.allPerSendProfit=response.allPerSendProfit
        this.count = response.count;
        this.listLoading = false;
      }).catch(() => {
        this.listLoading = false;
      });
    },
  },
}
</script>
<style scoped lang="scss">
</style>
